<template>
	<div>
		<!--弹出遮罩层-->
		<mu-flex>
			<mu-fade-transition>
				<div v-show="vip_show" style="transition: opacity .5s;z-index:1000;background-color: rgba(148,148,148,0.5);width: 100%;height: 100%;padding: 0px;margin: 0px;position: absolute;top: 0px;left: 0px;">
					<div style="background-color:#FEFEFE ;border-radius: 8px;width: 80%;height: 300px;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
						<img src="../../static/images/弹窗.png" style="border-radius: 8px;width: 100%;height: auto;" />
						<div style="display: flex;flex-direction: row ;align-items: center;justify-content:space-between;">
							<span></span>
							<mu-button color="primary" @click="gotogetVip()">购买</mu-button>
							<mu-button color="white" style="color: black;" @click="vip_show = false">取消</mu-button>
							<span></span>
						</div>
					</div>
				</div>
			</mu-fade-transition>
		</mu-flex>
		<top-nav bgColor="#FFFFFF" title="高考大数据" btnName="主页" :rightShow="false" returnPath="上一级"></top-nav>
		<section style="height: 3rem;"></section>
		<section style="width:100%;margin-top: 15px;margin-bottom: 10px;">
			<mu-row>
				<mu-col span="8"><input v-model="searchitem" type="text" placeholder="请输入学校名称" /></mu-col>
				<mu-col span="4">
					<mu-button @click="getUniversitys()" color="primary" style="height: 30px;">搜索学校</mu-button>
				</mu-col>
			</mu-row>
		</section>
		<section>
			<mu-container style="border-bottom: 1px solid rgba(0,0,0,0.4);margin-bottom: 10px;">
				<mu-row gutter>
					<mu-col>
						<mu-select v-model="idLevel" style="width: 40%;font-size: 3.5vw;" @change="getUniversitys()">
							<mu-option v-for="level,index in level" :key="level" :label="level" :value="level" ripple></mu-option>
						</mu-select>
						<mu-select v-model="idLearnType" style="width: 40%;font-size: 3.5vw;" @change="getUniversitys()">
							<mu-option v-for="learnType,index in learnType" :key="learnType" :label="learnType" :value="learnType" ripple></mu-option>
						</mu-select>
					</mu-col>
				</mu-row>
			</mu-container>
		</section>
		<div id="selectPage">
			<section v-for="item in universitys" style="padding-top: 0px;padding-bottom: 0px;">
				<mu-list textline="two-line" @click="gotoSchool()">
					<mu-list-item avatar :ripple="true" button>
						<mu-list-item-action>
							<mu-avatar>
								<img v-bind:src="idSchoolImg" />
							</mu-avatar>
						</mu-list-item-action>
						<mu-list-item-content>
							<mu-list-item-title>
								<span class="schoolTitle">{{item.nameForShow}}</span>
								<div style="position: absolute;left: 78%;display: inline-block;">
									<span class="schoolTitle" style="color: rgba(0, 0, 0, .87);"> {{item.predictor}}</span>
								</div>
							</mu-list-item-title>
							<mu-list-item-sub-title>
								<div style="margin-top: 8px;">
									<div style="color: #C5C5C5;display: inline-block;">
										<span class="schoolMessage" style="color: #C4C400;">学校代码:</span>
										<span class="schoolMessage" style="color: #C4C400;">{{item.code}}</span>
										<span class="schoolMessage">{{item.nature}}</span>
										<span class="schoolMessage">{{item.cities}}</span>
									</div>
									<div style="position: absolute;left: 74%;display: inline-block;">
										<span class="schoolMessage">模拟录取线</span>
										<div class="right-arrow" style="display: inline-block;position: relative;left: 14px;bottom: 18px;"></div>
									</div>
								</div>
							</mu-list-item-sub-title>
						</mu-list-item-content>
					</mu-list-item>
					<mu-divider></mu-divider>
				</mu-list>
			</section>
			<!--<div style="width: 33%;height: 86%;border:1px solid red;background-color: rgba(247,247,247);position:absolute;right:0;bottom:0;opacity:.5;">
			</div>-->
		</div>
	</div>
</template>

<script>
	var storage = window.localStorage;
	export default {
		data() {
			return {
				vip_show: false,
				level: [
					'本科', '专科',
				],
				learnType: [
					'普通', '校企合作', '中外合作', '3+2连续', '艺术',
					'春考',
				],
				idSchoolImg: "../../static/images/touxiang4.jpg",
				searchitem: null,
				idLearnType: null,
				idLevel: null,
				idNature: "全部",
				idWenlike: "文科",
				idCategory: "全部",
				universitys: [
					//{
					//						id: 1,
					//						code: "A2A2",
					//						name: "山东科技大学",
					//						predictor: 510.5,
					//						cities: "青岛"
					//
					//					},
					//					{
					//						id: 2,
					//						code: "B2B2",
					//						name: "山东大学",
					//						predictor: 610.5,
					//						cities: "济南"
					//
					//					}
				],
			};
		},
		mounted() {
			this.idLevel = storage["level"]
			this.idLearnType = storage["learnType"]
			this.searchitem = storage["searchitem"]
			this.idWenlike = localStorage.wenlike
			console.log(this.searchitem)
			this.getUniversitys()
		},
		methods: {
			gotoSchool() {
				this.vip_show = !(this.vip_show)
			},
			gotogetVip() {
				this.$router.push({
					name: 'getVip',
				})
			},
			closeSearch() {
				this.open = !this.open
				this.getUniversitys()
			},
			getUniversitys() {
				storage.setItem("idLearnType", this.idLearnType)
				storage.setItem("idLevel", this.idLevel)
				var search = {
					idLevel: this.idLevel,
					idNature: this.idNature,
					idArea: "全部",
					idWenlike: localStorage.wenlike,
					idLearnType: this.idLearnType,
					schoolName: this.searchitem,
					idCategory: this.idCategory
				}

				let that = this
				that.axios.post('gaokao-api/api/getUniversitys',
					search
				).then(function(response) {
					console.log(response)
					that.universitys = response.data.universitys
				}).catch(function(error) {
					console.log(error)
				})

			},

		},
	};
</script>

<style scoped="scoped">
	.selectSectionBox {
		border-left: 6px solid deepskyblue;
	}
	
	.selectSectionText {
		padding-left: 10px;
		text-align: left;
		font-weight: 600;
		font-size: 15px;
	}
	
	#selectPage ul {
		padding: 0px;
	}
	
	.schoolTitle {
		font-weight: 500;
	}
	
	.schoolMessage {
		font-size: 3.0vw;
	}
	/*-单选框手机样式*/
	
	.RadioStyle {
		background-color: #F9F9F9;
		width: 100%;
	}
	
	.RadioStyle input {
		display: none;
	}
	
	.RadioStyle label {
		border: 1px solid #00a4ff;
		padding: 2px 10px 2px 5px;
		line-height: 28px;
		min-width: 90px;
		text-align: center;
		float: left;
		margin: 2px;
		border-radius: 4px;
	}
	
	.RadioStyle input:checked+label {
		background: url(../../static/images/ico_checkon.svg) no-repeat right bottom;
		background-size: 21px 21px;
		color: #00a4ff
	}
	
	.right-arrow {
		width: 10px;
		height: 10px;
		border-top: 1px solid rgb(0, 0, 0, 0.4);
		border-right: 1px solid rgb(0, 0, 0, 0.4);
		transform: rotate(45deg);
	}
</style>